<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>User List</title>
</head>
<body>
    <table id="userListTable" border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>工号</th>
        </tr>
    </table>
    <input type="button" value="增加" onclick="goAddPage()" />
</body>

<script type="text/javascript" th:src="@{/static/js/jquery-2.1.4.min.js}"></script>
<script th:inline="javascript">
    function loadList() {
        $.ajax({
            type: 'POST',
            dataType: 'JSON',
            url: '/front/user/listData',
            data: {
            },
            success: function (result) {
                //alert(JSON.stringify(result));
                $.each(result.data, function (i, obj) {
                    var tr = '<tr><td>' + obj.name + '</td>' + '<td>' + obj.age + '</td>' + '<td>' + obj.card + '</td></tr>';
                    $("#userListTable").append(tr);
                })
            }
        });
    }

    function goAddPage() {
        window.location.href='/front/user/add';
    }

    $(document).ready(function(){
        loadList();
    });
</script>
</html>